<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Spark gallery index</title>
    <link rel="stylesheet" href="../screen.css" type="text/css" media="screen, projection">
    <link rel="stylesheet" href="../print.css" type="text/css" media="print">
  </head>
  <body>
    <div class="container">
      <div class="span-24 last prepend-top">
	<header>
	  <h1><a href="../../index.html"><img src="../spark-logo.png" alt="Spark" label="Spark"></a></h1>
	  <h3>Getting started</h3>
	</header>
	<p>
	  As an example, consider the following snippet which is a complete HTML page, retrieving the names of friends of Denny from his FOAF file and displaying the results on the page.
	</p>
	<pre>&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;http://km.aifb.kit.edu/sites/spark/src/jquery.spark.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Denny's friends&lt;/h1&gt;
    &lt;div class=&quot;spark&quot;
         data-spark-rdf=&quot;http://simia.net/foaf.rdf&quot;
         data-spark-format=&quot;ul&quot;
         data-spark-query=&quot;SELECT ?entity ?label
                           WHERE { &lt;http://simia.net/foaf.rdf#denny&gt; foaf:knows ?entity .
                                   ?entity foaf:name ?label }&quot;&gt;
      loading
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt
</pre>
	<p>
	  <a href="../example.html">load that page</a>
	</p>

	<h3>Example gallery</h3>
	<p>
	  This is a list of example sparks, using different visualisers and data
	  sources. The first link points to a page that makes a dynamic query. The
	  second example uses a locally saved answer, so that the demo will display
	  results even if the actual data source should not be accessible for some
	  reason.
	</p>
	<ol>
	  <li>
	    Simple list
	    <a href="simple.html">[demo]</a>
	    <a href="simple.static.html">[static]</a>
	  </li>
	  <li>
	    Simple table
	    <a href="simpletable.html">[demo]</a>
	    <a href="simpletable.static.html">[static]</a>
	  </li>
	  <li>
	    Date chart
	    <a href="datechart.html">[demo]</a>
	    <a href="datechart.static.html">[static]</a>
	  </li>
	  <li>
	    Pie chart
	    <a href="piechart.html">[demo]</a>
	    <a href="piechart.static.html">[static]</a>
	  </li>
	</ol>

	<footer>
	  <p>
	    <a href="../../">[main page]</a>
	    &mdash;
	    <a href="../../news.html">[news]</a>
	    &mdash;
	    <a href="../">[documentation]</a>
	    &mdash;
	    [examples]
	    &mdash;
	    <a href="http://code.google.com/p/rdf-spark/">[development site]</a>
	  </p>
	  <p>
	    <a href="http://www.aifb.kit.edu"><img alt="KIT" border="0" title="KIT" src="../kit.png" width="70" height="26" /></a>
	    Developed 2011 by
	    <a href="http://denny.vrandecic.de">Denny Vrande&#269;i&#263;</a>
	    and
	    <a href="http://harth.org/andreas/">Andreas Harth</a>
	  </p>
	</footer>
      </div>
    </div>
  </body>
</html>
